<template>
  <n-data-table
    :columns="columns"
    :data="data"
    :pagination="pagination"
    :bordered="false"
  />
</template>

<script setup lang='ts'>
import {GetAllUser,SetSuperUser,RemoveSuperUser} from '../../api/api'
import { h, onMounted,ref } from 'vue'
import { NButton,NTag,NAvatar } from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'

var data = ref([])

const initUser = async() => {
  const userData = await GetAllUser()
  data.value = userData.user_data
}

onMounted(async () => {
  initUser()
})

type Song = {
  username: string
  mobile: string
  date_joined: string
  is_superuser: number
  head_img:string
}

const createColumns = ({
  setSuperUser,
  removeSuperUser
}: {
  setSuperUser: (row: Song) => void,
  removeSuperUser: (row: Song) => void
}): DataTableColumns<Song> => {
  return [
  {
      title: '用户头像',
      key: 'head_img',
      render (row) {
        return h(
          NAvatar,
          {
            round: true,
            size:"small",
            src:row.head_img?row.head_img:"https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg",
            'fallback-src':"https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg",
          },
        )
      }
    },
    {
      title: '用户名',
      key: 'username',
    },
    {
      title: '手机号',
      key: 'mobile',
    },
    {
      title: '注册时间',
      key: 'date_joined',
    },
    {
      title: '用户身份',
      key: 'is_superuser',
      render (row) {
          return h(
            NTag,
            {
              type: 'info',
              bordered: false,
              round:true
            },
            {
              default: () => row.is_superuser==1?"管理员":"普通用户"
            }
          )
      }
    },
    {
      title: '',
      key: 'setSuperUser',
      render (row) {
        return h(
          NButton,
          {
            strong: true,
            tertiary: true,
            size: 'small',
            type: 'primary',
            onClick: () => setSuperUser(row)
          },
          { default: () => '设为管理员用户' }
        )
      }
    },
    {
      title: '',
      key: 'removeSuperUser',
      render (row) {
        return h(
          NButton,
          {
            strong: true,
            tertiary: true,
            size: 'small',
            type: 'error',
            onClick: () => removeSuperUser(row)
          },
          { default: () => '移除管理员' }
        )
      }
    }
  ]
}

var columns = createColumns({
  async setSuperUser (row: Song) {
    if(sessionStorage.getItem('token') == row.mobile){
      window.$message.warning("不可对自己操作")
    }else{
      let res = await SetSuperUser({
        username:row.username
      })
      if(res.state === "OK"){
        window.$message.success("设置成功！")
        initUser()
      }
    }
  },
  async removeSuperUser(row:Song){
    if(sessionStorage.getItem('token') == row.mobile){
      window.$message.warning("不可对自己操作")
    }else{
      let res = await RemoveSuperUser({
        username:row.username
      })
      if(res.state === "OK"){
        window.$message.success("移除成功！")
        initUser()
      }
    }
  }
})

const pagination:object = {pageSize:11}

// const data: Song[] = []
  
</script>

<style lang="scss" scoped>

</style>